<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>团员列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 引入layui.css -->
    <link
            rel="stylesheet"
            href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"
    >
    <!-- 引入layui.js -->
    <script scr="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <!--表单信息（搜索条件）-->
    <div class="layui-form">
        <!--这两个隐藏的输入框用来存放当前页码值，以及页面显示数据的最大行数-->
        <input type="hidden" name="pageNum" id="pageNum" value="1">
        <input type="hidden" name="pageSize" id="pageSize" value="10">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">团员名</label>
                <div class="layui-input-block">
                    <input type="text" name="username"
                           placeholder="请输入" autocomplete="off" class="layui-input" >
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="telep" placeholder="请输入"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button id="getUser" class="layui-btn" lay-submit lay-filter="LAY-user-front-search">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </div>
    </div>
<!--    <xblock>-->
<!--        <button class="layui-btn layui-btn-danger" onclick="delMany()" id="delMany1"><i class="layui-icon"></i>批量删除</button>-->
<!--        <span class="x-right" style="line-height:40px" id="userNum">共有数据：88 条</span>-->
<!--    </xblock>-->

    <script type="text/html" id="table-operation">
<!--        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>编辑</a>-->
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>删除</a>
    </script>

    <!--数据表格位置-->
    <table id="data-table" lay-filter="data-table"></table>
    <!--分页位置-->
    <div id="data-page" class="layui-table-page" lay-filter="data-page"></div>

</div>
<script>
    /**
     * 获取query参数后面的属性
     * @param {String} name 需要获取的参数
     */
    var gtGetQueryString = function(name){
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
        var url = window.location.href
        var search = url.substring(url.lastIndexOf('?') + 1)
        var r = search.match(reg)
        if (r != null) return decodeURI(r[2])
        return null
        window.gtGetQueryString = gtGetQueryString;
    }
    //调用方法进行取值
    var tzid=gtGetQueryString("cid");
    //打印值
    console.log(tzid);


    var uids=new Array()
    var uidsList=new Array()

    /*删除数组中指定下标的元素*/
    function remove(arr, item) {
        for(var i=arr.length-1;i>=0;i--)
        {
            if(arr[i]==item)
            {
                arr.splice(i,1);
            }
        }
        return arr;
    }
    // 此时不用考虑位置影响

    layui.use(['form','table','laypage','layer'], function() {
        var $ = layui.jquery
            ,form = layui.form,table = layui.table,laypage=layui.laypage,layer=layui.layer;


        var limits = [10, 20, 30, 40]
        var pageNum=$("#pageNum")
        var pageSize=$("#pageSize")
        let userTable=table.render({
            elem: "#data-table",
            url: "/users/getGroupByTzid/"+tzid,
            id:"idTest",
            cols: [[
                // { type: 'checkbox' },
                // {field: "uid", width: 30, title: "ID", sort: true},
                {field: "username",align: "center", title: "团员名"},
                {field: "avatar", title: "头像", style:"height:40px",align: "center", templet: "#imgtmp"},
                {field: "telep",align: "center", title: "手机"},
                {title: "操作", width: 150,align: "center", toolbar: "#table-operation"}
            ]],
            done:function (res, curr, count) {
                $('#userNum').html('共有数据：'+res.count +' 条')
                console.log("服务器返回数据")
                console.log(res)
                let data=res.data
                console.log(data)
                for (let i=0;i<data.length;i++){
                    uidsList.push(data[i].uid)
                }
                console.log("uidsList:"+uidsList)
                laypage.render({
                    elem: 'data-page',
                    count: count,
                    curr:  res.pageNum,
                    limit: res.pageSize,
                    limits: limits,
                    layout:['count','prev','page','next','limit','skip'],
                    jump:function (obj,first) {
                        console.log("当前分页栏的属性")
                        console.log(obj)
                        $("#pageNum").val(obj.curr)
                        $("#pageSize").val(obj.limit)
                        if (!first){
                            $("#getUser").click()
                            uidsList=[]
                            uids=[]
                        }
                    }
                });
            },
        });

        form.on('submit(LAY-user-front-search)', function (data) {
            var filed = data.field;
            table.reload('idTest', {
                where:filed
            });
            return false;
        });

        /*用户-删除全部*/
        function delAll(argument) {
            var data = tableCheck.getData();
            layer.confirm('确认要删除吗？' + data, function (index) {
                layer.msg('删除成功', {icon: 1});
                $(".layui-form-checked").not('.header').parents('tr').remove();
            });
        }

        /*刪除一条数据*/
        table.on('tool(data-table)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;
            console.log(data)
            var uid=data.uid;
            if(layEvent === 'detail'){

            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        type: 'GET',
                        url: "/users/updateTzidNull/"+uid,
                        processData: false,
                        contentType: false,
                        async: false,
                        success: function (res) {
                            console.log(res);
                        }
                    });
                });
            } else if(layEvent === 'edit'){ //编辑
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });


        // var uids=new Array()
        table.on('checkbox(data-table)', function(obj){
            var data=obj.data;
            console.log("复选框")
            console.log(obj); //当前行的一些常用操作集合
            console.log(obj.checked); //当前是否选中状态

            //若是选择状态，则加入uids数组
            if (obj.checked==true){
                uids.push(data.uid)
            }else{//若为未选择状态，则删除该uid
                uids=remove(uids,data.uid)
            }
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
            if (obj.type=="all"){
                console.log(data);
                uids=uidsList
            }
            console.log(uids)
        });



    })//layui结束


    function delMany(argument) {
        console.log("============="+uids)
        layer.confirm('确认要删除吗？' + uids, function (index) {
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $.ajax({
                type: 'GET',
                url: "/users/"+uids+"/delManyUsers",
                processData: false,
                contentType: false,
                async: false,
                success: function (res) {
                    console.log(res);
                }
            });
            // $(".layui-form-checked").not('.header').parents('tr').remove();
        });
    }

</script>
<script type="text/html" id="imgtmp">
    <img src="{{d.avatar}}" style="width:40px;height: 40px;">
</script>
</body>

</html>